<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <%--<link rel="stylesheet" type="text/css" href="../lib/laydate.css"/>--%>
    <link rel="stylesheet" type="text/css" href="../lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../css/news/center.css"/>
    <%--<link rel="stylesheet" href="../ui/css/leader/WdatePicker.css">--%>
    <%--<link rel="stylesheet" type="text/css" href="../lib/laydate.css"/>--%>
    <script type="text/javascript" src="../js/news/jquery-1.9.1.js"></script>
    <script src="../js/news/page.js"></script>
    <%--<link rel="stylesheet" href="../lib/layui-v1.0.9_rls/css/layui.css" media="all">--%>
    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/layer/layer.js?20201106"></script>
    <script type="text/javascript" src="../js/spirit/qwebchannel.js"></script>
    <script src="../js/leader/WdatePicker.js"></script>
    <%--<script src="../lib/laydate.js"></script>--%>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <style>
        .head {
            height: 45px;
            border-bottom: #999 1px solid;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding-left: 20px;
            width: 100%;
            font-size: 12px;
            background-color: #fff;
            z-index: 99999;
        }
        .divSelect{
            float: right;
            margin-top: 17px;
            margin-bottom: 10px;
            margin-right: 8px;
        }
        table{
            margin-top: 65px;
            margin-right: 100px;
            float: right;
            width:20%;
            border: 1px;
        }
        table td{
            text-align: center;
            font-size: 2px;
            border: 1px solid rgb(192, 192, 192) ;
        }
        table tr {
            height: 10px;
        }
        .title{
            background-color: rgb(206,206,206);
        }
        #chart{
            float: left;
            width: 60%;
            height: 400px;
            padding-left: 20px;
            margin-top: 70px;
        }
        #chart div:nth-child(1){
            width:100%!important;
        }
        canvas{
            width:100%!important;
        }
        .headTitle {
            margin-top: 12px;
            font-size: 22px;
            color: #494d59;
            height: 20px;
            margin-left: 8px;
            float: left;
        }

    </style>
</head>
<body>
<div class="content">
    <%--<div class="head">--%>
        <%--<div class="headTitle">巡查统计</div>--%>
    <%--</div>--%>
    <div class="divSelect">
        <input type="text" value="2018" style="width:150px;margin-right:100px;border-radius: 3px;    position: absolute;
    right: 20px;" class="Wdate" id="year"   onclick="WdatePicker({onpicked:function(dq){init();},dateFmt:'yyyy'})" />
        <%--<select id="year">--%>
            <%--<option value="2017" selected="selected">2017</option>--%>
            <%--<option value="2016">2016</option>--%>
            <%--<option value="2015">2015</option>--%>
            <%--<option value="2014">2014</option>--%>
            <%--<option value="2013">2013</option>--%>
            <%--<option value="2012">2012</option>--%>
            <%--<option value="2011">2011</option>--%>
            <%--<option value="2010">2010</option>--%>
        <%--</select>--%>
    </div>
    <div class="tab" >
        <table>
            <tr class="title">
                <td style="font-weight: bold">月份</td>
                <td style="font-weight: bold">次数</td>
            </tr>
            <tr>
                <td >一月</td>
                <td id="one"></td>
            </tr>
            <tr>
                <td >二月</td>
                <td id="two"></td>
            </tr>
            <tr>
                <td >三月</td>
                <td id="three"></td>
            </tr>
            <tr>
                <td >四月</td>
                <td id="four"></td>
            </tr>
            <tr>
                <td >五月</td>
                <td id="five"></td>
            </tr>
            <tr>
                <td >六月</td>
                <td id="six"></td>
            </tr>
            <tr>
                <td >七月</td>
                <td id="july"></td>
            </tr>
            <tr>
                <td >八月</td>
                <td id="august"></td>
            </tr>
            <tr>
                <td >九月</td>
                <td id="september"></td>
            </tr>
            <tr>
                <td >十月</td>
                <td id="october"></td>
            </tr>
            <tr>
                <td >十一月</td>
                <td id="november"></td>
            </tr>
            <tr>
                <td >十二月</td>
                <td id="december"></td>
            </tr>
            <tr>
                <td >合计</td>
                <td id="total"></td>
            </tr>
        </table>
    </div>
    <div id="chart"></div>
</div>
<script type="text/javascript">


    $("#year").change(function() {
        init();
    });
    function init() {
        var year = $("#year").val();
   //     console.log(year)
        var total = 0;
        var one = 0;
        var two = 0;
        var three = 0;
        var four = 0;
        var five = 0;
        var six = 0;
        var july = 0;
        var august = 0;
        var september = 0;
        var october = 0;
        var november = 0;
        var december = 0;
        $.ajax({
            type:'get',
            url:'/infomation/getstaticInfo',
            dataType:'json',
            data:{'year':year},
            success:function (res) {
                var datas = res.object;
//                console.log(datas.length)

                    one=datas.one;
                    two=datas.two;
                    three=datas.three;
                    four=datas.four;
                    five=datas.five;
                    six=datas.six;
                    july=datas.seven;
                    august=datas.eight;
                    september=datas.nine;
                    october=datas.ten;
                    november=datas.eleven;
                    december=datas.twelve;
                total=datas.count;
//                    console.log(december)
                    add();
                    chart();

//                    add();
//                    chart();
//                    $.layerMsg({content: '暂无统计数据！', icon: 5});
//                }
            }
        })

        function add() {
            $("#one").text(one);
            $("#two").text(two);
            $("#three").text(three);
            $("#four").text(four);
            $("#five").text(five);
            $("#six").text(six)
            $("#july").text(july);
            $("#august").text(august);
            $("#september").text(september);
            $("#october").text(october);
            $("#november").text(november);
            $("#december").text(december);
            $("#total").text(total);
        }

        function chart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '',
                    left: 'center'
                },
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    textStyle:{
                        align:'right'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitNumber:8,
                        min: 0,
                        max: 100
                    }
                ],
                series : [
                    {
                        name:'',
                        type:'line',
                        barWidth: '60%',
                        data:[one, two, three, four, five, six, july, august, september, october, november, december]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

    }

    init();

     var date= {
            elem: '#year'
            ,type: 'year'
        };




</script>
</body>

</html>
